<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="position: absolute;background: red;" id="div">我是div</div>
<div>
    <p>输入小球移动的位置： <input type="text" id="pos"></p>
    <button id="moveBtn">开始移动</button>
    <br>
    <button id="cancelBtn">取消移动</button>
</div>
<script>
    (function () {

        var tween = {
            linear:function (t, b, c, d) {
                return c*t/d+b;
            },
            easeIn:function (t, b, c, d) {
                return c*(t/=d)*t+b;
            },
            strongEaseIn:function (t, b, c, d) {
                return c*(t/=d)*t*t*t*t+b;
            },
            strongEaseOut:function (t, b, c, d) {
                return c*((t=t/d-1)*t*t*t*t*t+1)+b;
            },
            sineaseIn:function (t, b, c, d) {
                return c*(t/=d)*t*t+b;
            },
            sineaseOut:function(t,b,c,d){
                return c*((t=t/d-1)*t*t+1)+b;
            }
        };

        var Animate = function (dom) {
            this.dom = dom;
            this.startTime = 0;
            this.startPos = 0;
            this.ednPos = 0;
            this.propertyName = null;
            this.easing = null;
            this.duration = null;
        };

        Animate.prototype.start = function (propertyName,endPos,duration,easing) {
            this.startTime = +new Date;
            this.startPos = this.dom.getBoundingClientRect()[propertyName];
            this.propertyName = propertyName;
            this.endPos = endPos;
            this.duration = duration;
            this.easing = tween[easing];
            var self = this;
            var timeId = setInterval(function () {
                if(self.step()===false){
                    clearInterval(timeId);
                }
            },19);
        };

        Animate.prototype.step =function () {
            var t = +new Date;
            if(t>=this.startTime+this.duration){
                this.update(this.endPos);
                return false;
            }
            var pos = this.easing(t-this.startTime,this.startPos,this.endPos-this.startPos,this.duration);
            this.update(pos);
        }

        Animate.prototype.update = function (pos) {
            this.dom.style[this.propertyName] = pos+'px';
        }
        window.Animate = Animate;
    })();

    var div = document.getElementById('div');
    var pos = document.getElementById('pos');
    var moveBtn = document.getElementById('moveBtn');
    var cancelBtn = document.getElementById('cancelBtn');

    var MoveCommand = function (receiver, pos) {
        this.receiver = receiver;
        this.pos = pos;
        this.oldPos = null;
    }

    MoveCommand.prototype.execute = function () {
        this.receiver.start('left',this.pos,1000,'linear');
        this.oldPos = this.receiver.dom.getBoundingClientRect()[this.receiver.propertyName];
    }
    MoveCommand.prototype.undo = function () {
        this.receiver.start('left',this.oldPos,1000,'linear');
    }

    var moveCommand;


    moveBtn.onclick = function () {
        var animate = new Animate(div);
        moveCommand = new MoveCommand(animate,pos.value);
        moveCommand.execute()
    }

    cancelBtn.onclick = function () {
        if(!moveCommand){
            return false;
        }
        moveCommand.undo();
    }



</script>
</body>
</html>